<!--  -->
<template>
    <div :class="['li-grid', border ? 'li-grid-border' : '', hover ? 'li-grid-hover' : '']" :style="styles"><slot></slot></div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed } from 'vue';

const props = defineProps({
    // 按钮类型: 垂直 horizontal | 水平 vertical ; 默认: vertical
    col: {
        type: [String, Number],
        default: 3
    },
    // 是否显示边框
    border: {
        type: Boolean,
        default: true
    },
    // 宫格总长度
    width: {
        type: String,
        default: '100%'
    },
    // 文本对齐方式: left | center | right
    textAlign: {
        type: String,
        default: 'center'
    },
    // 鼠标悬停效果
    hover: {
        type: Boolean,
        default: true
    }
});
const border = computed(() => props.border);
const styles = computed(() => {
    let style: object = { width: props.width, textAlign: props.textAlign };
    if (+props.col > 1) {
        style['grid-template-columns'] = `repeat(${props.col}, 1fr)`;
    } else {
        style['grid-template-columns'] = `repeat(3, 1fr)`;
    }
    return style;
});

const install = (app: any) => {
    app.component('LiGridItem', this);
};
</script>

<style lang="less">
.li-grid {
    display: grid;
}
.li-grid-border {
    border-top: thin solid #f5f6f8;
    border-left: thin solid #f5f6f8;
    .li-grid-item {
        border-right: thin solid #f5f6f8;
        border-bottom: thin solid #f5f6f8;
    }
}
.li-grid-hover {
    .li-grid-item:hover {
        // opacity: 0.8;
        z-index: 1;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
}
</style>
